<template>
    <div style="background-color: white;height: 450px;overflow-y: scroll">
        <div class="mui-flex" v-for="(item,index) in liebiaoinitialAr" style=" height: 90px;
        border-bottom: 1px solid #e1e1e1;">
            <div class="cell3">
                <p class="voucher-title" >{{item.name}}</p>
                <p class="voucher-description" >{{item.specName}}</p>
            </div>
            <div class="cell">
                <div class="number"></div>
                <!--////0 是灰色#cccece 1 是办公用品 #e9b778 2 是凭证请领 #83d16f-->
                <!--<Spinner  type="3" :index="index" max="500" min="0" unit="1" :amounts="item.amounts"  @addnumberclick="addnumberclick"-->
                          <!--@minusnumberclick="minusnumberclick"  width="80px" height="30px" >{{item.amounts}}</Spinner>-->
                <!--<Spinner  type="1" :index="index" max="500" min="0" unit="1" :amounts="item.amounts"  @addnumberclick="addnumberclick"-->
                          <!--@minusnumberclick="minusnumberclick"  width="80px" height="30px" >{{item.amounts}}</Spinner>-->
                <OfficeSpiner :index="index" max="500" min="0" unit="1" :amounts=item.amounts  @getspinnernumer="getselectspinnernumer"  width="80px" height="30px" >{{item.amounts}}</OfficeSpiner>


            </div>
        </div>
    </div>
</template>
<script>
    import OfficeSpiner from "@/components/officeSpiner.vue";

    export default {
        name: "officeSelectCellComponent",

        data() {
            return {
            }
        },
        props: {
            liebiaoinitialAr: {
                type: Array,
                default() {
                    return []
                }
            },
        },
        watch: {


        },
        components: {
            OfficeSpiner
        },
        created() {


        },
        methods:
            {
                getselectspinnernumer(data)
                {
                    // console.log(data);
                    var newAr=[];
                    newAr=JSON.parse(localStorage.getItem('officedata'));
                    var dic={};
                    dic=newAr[data.index];
                    dic['amounts']=data.amounts;
                    //新数据替换旧数据 把选择的数据替换列表的数据
                    newAr.splice(data.index,1,dic);
                    localStorage.setItem('officedata',JSON.stringify
                    (newAr));
                    this.$emit('liebiaoData',newAr); //主动触发selectHead方法，'123'为向父组件传递的数据

                }


               }

    }
</script>

<style scoped>

    .voucher-title {
        color: #464646;
        font-size: 0.25rem;
        text-align: left;
        padding-left: 20px;
        padding-top: 15px;
        width: 100%;
    }

    .voucher-description {
        color: #b1b1b1;
        font-size: 0.2rem;
        text-align: left;
        padding-left: 20px;
        width: 100%;
        padding-top: 10px;

    }
    .number {
        padding-right: 20px;
        padding-top: 20px;
    }


</style>